<template>
  <div>
    <el-row class="custom-row" :gutter="20">
      <el-col class="custom-col" :span="4">
        <TrainListDownload
          ref="trainListData"
          @clickList="clickList"
        />
      </el-col>
      <el-col class="custom-col" :span="20">
        <CheckResultTable
          ref="trainCheckData"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>

import TrainListDownload from '@/views/trainSystem/components/trainListDownload'
import CheckResultTable from '@/views/trainSystem/components/checkResultTable'

export default {
  name: 'CheckResultClick',
  components: { CheckResultTable, TrainListDownload },
  data() {
    return {
      redirect: undefined,
      otherQuery: {},
      items: [
        { id: 1, content: '文件编号或名称01', name: '文件名称:EVE-2018-12-11 08....',
          selected: false, status: 'active', trainNo: 'HXD1-1123B', partName: 'ERM-eve',
          time: '2018-12-11 08:10:66' },
        { id: 2, content: '文件编号或名称02', name: '文件名称:EVE-2018-12-11 08....',
          selected: false, status: 'active', trainNo: 'HXD2-1123B', partName: 'ERM-eve',
          time: '2018-12-11 08:10:66' },
        { id: 3, content: '文件编号或名称03', name: '文件名称:EVE-2018-12-11 08....',
          selected: false, status: 'inactive', trainNo: 'HXD3-1123B', partName: 'ERM-eve',
          time: '2018-12-11 08:10:66' },
        { id: 4, content: '文件编号或名称04', name: '文件名称:EVE-2018-12-11 08....',
          selected: false, status: 'inactive', trainNo: 'HXD1-3223B', partName: 'ERM-eve',
          time: '2018-12-11 08:10:66' }
      ]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        console.log('clickroute',route)

        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
          console.log('clickroutequery',this.otherQuery)
          console.log('clickroutequeryredirect',this.redirect)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.$refs.trainListData.trainListData(this.items)
    this.$refs.trainCheckData.trainListData(this.items[0])
  },
  methods: {
    clickList(item) {
      this.$refs.trainCheckData.trainListData(item)
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style scoped>
.custom-row {
  display: flex;
  flex-wrap: wrap;
  height: 900px; /* 设置el-row的高度，确保这是一个固定值或者继承自父元素 */
  margin-top: 45px;
}

.custom-col {
  height: 100%; /* 让el-col继承el-row的高度 */
  /* 确保el-col内的内容不会超出其高度 */
  overflow: auto; /* 或者使用auto，如果需要滚动条 */
}
</style>
